<template>
    <view class="content">
        <view class="bg"></view>
        <view class="wrapper">
            <view class="box">
                <view class="item">
                    <view>孩子姓名</view>
                    <view class="item-right">
                        <input type="text" v-model="name" placeholder="请输入姓名" class="inp">
                    </view>
                </view>
                <view class="item" @click="show_1 = true">
                    <view>性别</view>
                    <view class="item-right">
                        <input type="text" v-model="sex" placeholder="请选择" class="inp" disabled>
                        <u-icon name="arrow-down-fill" color="#535353" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
                <view class="item">
                    <view>年龄</view>
                    <view class="item-right">
                        <input type="number" v-model="age" placeholder="请输入年龄" class="inp">
                    </view>
                </view>
                <view class="item" @click="show_2 = true">
                    <view>性格</view>
                    <view class="item-right u-flex-1">
                        <view class="u-flex-1 u-p-l-15 u-text-right" v-if="character">{{ character }}</view>
                        <view style="color:#838383" v-else>请选择</view>
                        <u-icon name="arrow-down-fill" color="#535353" size="24" class="u-m-l-10"></u-icon>
                    </view>
                </view>
            </view>
            
            <view class="title">孩子爱好</view>
            <view class="box u-p-20">
                <textarea v-model="hobby" placeholder="请输入爱好内容" maxlength="-1" :auto-height="true" class="t-inp"></textarea>
            </view>
            
            <view class="title">孩子疾病史</view>
            <view class="box u-p-20">
                <textarea v-model="disease" placeholder="请输入疾病史内容" maxlength="-1" :auto-height="true" class="t-inp"></textarea>
            </view>
            
            <view class="title">孩子过敏源</view>
            <view class="box u-p-20">
                <textarea v-model="allergy" placeholder="请输入过敏源内容" maxlength="-1" :auto-height="true" class="t-inp"></textarea>
            </view>
            
            <view class="btn" @click="doSubmit">确认提交</view>
        </view>
        
        <!-- 性别 -->
        <u-select v-model="show_1" mode="single-column" :list="sexList" @confirm="confirmSex"></u-select>
        
        <!-- 性格多选 -->
        <u-popup mode="bottom" v-model="show_2">
            <view class="popup">
                <scroll-view scroll-y="true" style="height: 500rpx;">
                    <view>
                        <view class="popup-item" v-for="(item, index) in characterList" :key="index"
                            :class="{active : item.isSelect}" @click="choose(item)">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
                <view class="pop-btn" @click="confirmCharacter">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show_1: false,
                show_2: false,
                sexList: [{value: 1,label: '男'},{value: 2,label: '女'}],
                sex: '',
                name: '',//
                age: '',//
                hobby: '',//爱好
                disease: '',//疾病史
                allergy: '',//过敏源
                character: '',//性格
                characterId: '',
                characterList: [],
            };
        },
        onLoad() {
            this.getCharacter()
        },
        methods: {
            doSubmit() {
                if (!this.name) {
                    this.$toast('请输入姓名')
                    return
                }
                if (!this.sex) {
                    this.$toast('请选择性别')
                    return
                }
                if (!this.age) {
                    this.$toast('请输入年龄')
                    return
                }
                if (!this.characterId) {
                    this.$toast('请选择性格')
                    return
                }
                if (!this.hobby) {
                    this.$toast('请输入爱好')
                    return
                }
                if (!this.disease) {
                    this.$toast('请输入疾病史')
                    return
                }
                if (!this.allergy) {
                    this.$toast('请输入过敏源')
                    return
                }
                
                this.$ajax('insert_child_data', {
                	user_token: this.$getSync('userToken'),
                    name: this.name,//姓名
                    gender: this.sex == '男' ? 1 : 2,//性别 1男 2女
                    age: this.age,//年龄
                    character_ids: this.characterId,//性格id，分割字符串
                    hobby: this.hobby,//爱好
                    disease: this.disease,//疾病史
                    allergy: this.allergy,//过敏源
                    id: '',//孩子资料id 编辑传
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 选择性别
            confirmSex(e) {
                this.sex = e[0].label
            },
            
            // 选择性格
            choose(item) {
                item.isSelect = !item.isSelect
            },
            confirmCharacter() {
                var a = [], b = []
                if (this.characterList && this.characterList.length > 0) {
                    this.characterList.forEach(cur => {
                        if (cur.isSelect) {
                            a.push(cur.name)
                            b.push(cur.id)
                        }
                    })
                }
                this.character = a.join(',')
                this.characterId = b.join(',')
                this.show_2 = false
            },
            
            // 获取性格列表
            getCharacter() {
            	this.$ajax('child_character', {
            		user_token: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.characterList = ret.detail.character
                        this.characterList.forEach(cur => {
                            this.$set(cur, 'isSelect', false)
                        })
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .active{
        font-weight: bold;
        color: #f29700;
    }
    .pop-btn{
        color: #fff;
        background-color: #f29700;
        padding: 20rpx;
        text-align: center;
        margin: 20rpx;
        border-radius: 50rpx;
    }
    
    
    page{
        background-color: #f5f5f5;
    }
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #f29700, #f5f5f5);
    }
    .wrapper{
        padding: 20rpx;
    }
    .box{
        padding: 0 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 30rpx;
    }
    .item{
        padding: 35rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #eee;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-right{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 15rpx;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    
    .title{
        font-size: 30rpx;
        font-weight: bold;
        padding-bottom: 25rpx;
    }
    .t-inp{
        width: 100%;
        min-height: 200rpx;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 10rpx;
        margin: 50rpx 0;
    }

</style>
